<template>
  <div class="q-pa-md">
    <t-form @submit="onSubmit" class="q-gutter-md">
      <div
        class="q-pa-sm rounded-borders"
        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
      >
        <t-checkbox
          name="accept_agreement"
          v-model="acceptAgreement"
          label="Accept agreement"
        />

        <t-checkbox
          name="subscribe_newsletter"
          v-model="subscribeNewsletter"
          label="Subscribe to newsletter"
          true-value="YES"
        />
      </div>

      <div
        class="q-pa-sm rounded-borders"
        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
      >
        <t-checkbox
          name="music_genre"
          v-model="genreRock"
          true-value="rock"
          label="Rock"
        />

        <t-checkbox
          name="music_genre"
          v-model="genreFunk"
          true-value="funk"
          label="Funk"
        />

        <t-checkbox
          name="music_genre"
          v-model="genrePop"
          true-value="pop"
          label="Pop"
        />
      </div>

      <div>
        <t-btn label="Submit" type="submit" color="primary" />
      </div>
    </t-form>

    <t-card
      v-if="submitted"
      flat
      bordered
      class="q-mt-md"
      :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
    >
      <template v-if="submitEmpty">
        <t-card-section>
          Submitted form contains empty formData.
        </t-card-section>
      </template>
      <template v-else>
        <t-card-section
          >Submitted form contains the following formData (key =
          value):</t-card-section
        >
        <t-separator />
        <t-card-section class="row q-gutter-sm items-center">
          <div
            v-for="(item, index) in submitResult"
            :key="index"
            class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
            >{{ item.name }} = {{ item.value }}</div
          >
        </t-card-section>
      </template>
    </t-card>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const submitted = ref(false);
      const submitEmpty = ref(false);
      const submitResult = ref([]);

      return {
        acceptAgreement: ref(false),
        subscribeNewsletter: ref(null),

        genreRock: ref('rock'),
        genreFunk: ref(false),
        genrePop: ref('pop'),

        submitted,
        submitEmpty,
        submitResult,

        onSubmit(evt) {
          const formData = new FormData(evt.target);
          const data = [];

          for (const [name, value] of formData.entries()) {
            data.push({
              name,
              value,
            });
          }

          submitted.value = true;
          submitResult.value = data;
          submitEmpty.value = data.length === 0;
        },
      };
    },
  };
</script>
